<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
		
/* .strip-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px;
}
.strip-loading li {
	border-radius: 3px;
	width: 6px;
	height: 30px;
	background-color: #f66;
	animation: beat 1s ease-in-out infinite;
}
.strip-loading li + li {
	margin-left: 5px;
}
.strip-loading li:nth-child(2) {
	animation-delay: 200ms;
}
.strip-loading li:nth-child(3) {
	animation-delay: 400ms;
}
.strip-loading li:nth-child(4) {
	animation-delay: 600ms;
}
.strip-loading li:nth-child(5) {
	animation-delay: 800ms;
}
.strip-loading li:nth-child(6) {
	animation-delay: 1s;
}

@keyframes beat {
	0%,
	100% {
		transform: scaleY(1);
	}
	50% {
		transform: scaleY(0.5);
	}
} */


/* .strip-loading {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 200px;
	height: 200px; 
}
.strip-loading li {
	--time: calc((var(--line-index) - 1) * 200ms);
	border-radius: 3px;
	width: 6px;
	height: 30px;
	background-color: #f66;
	animation: beat 1.5s ease-in-out var(--time) infinite; 
}
.strip-loading li + li {
	margin-left: 5px; 
}

@keyframes beat {
	0%,
	100% {
		transform: scaleY(1); 
	}
	50% {
		transform: scaleY(0.5); 
	} 
}
 */


.gradient-circular {
	left: 50%;
	width: 4px;
	height: 200px;
	position: relative;
}
.gradient-circular li {
	--Θ: calc(var(--line-index) / var(--line-count) * 1turn);
	position: absolute;
	left: 0;
	top: 0;
	width: 4px;
	height: 100%;
	background-color: #3c9;
	filter: hue-rotate(var(--Θ));
	transform-origin: center bottom;
	transform: rotate(var(--Θ));
}

.gradient-circular 	li::marker {
	display: none;
	color: transparent;
}




</style>
</head>
<body>
<!-- 	<ul class="strip-loading">
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	    <li></li>
	</ul> -->
	
<!-- 	<ul class="strip-loading">
		<li style="--line-index: 1;"></li>
		<li style="--line-index: 2;"></li>
		<li style="--line-index: 3;"></li>
		<li style="--line-index: 4;"></li>
		<li style="--line-index: 5;"></li>
		<li style="--line-index: 6;"></li>
	</ul> -->
	
	<ul class="gradient-circular" style="--line-count: 360;">
		<li style="--line-index:1"></li>
		<li style="--line-index:2"></li>
		<li style="--line-index:3"></li>
		<li style="--line-index:4"></li>
		<li style="--line-index:5"></li>
		<li style="--line-index:6"></li>
		<li style="--line-index:7"></li>
		<li style="--line-index:8"></li>
		<li style="--line-index:9"></li>
		<li style="--line-index:10"></li>
		<li style="--line-index:11"></li>
		<li style="--line-index:12"></li>
		<li style="--line-index:13"></li>
		<li style="--line-index:14"></li>
		<li style="--line-index:15"></li>
		<li style="--line-index:16"></li>
		<li style="--line-index:17"></li>
		<li style="--line-index:18"></li>
		<li style="--line-index:19"></li>
		<li style="--line-index:20"></li>
		<li style="--line-index:21"></li>
		<li style="--line-index:22"></li>
		<li style="--line-index:23"></li>
		<li style="--line-index:24"></li>
		<li style="--line-index:25"></li>
		<li style="--line-index:26"></li>
		<li style="--line-index:27"></li>
		<li style="--line-index:28"></li>
		<li style="--line-index:29"></li>
		<li style="--line-index:30"></li>
		<li style="--line-index:31"></li>
		<li style="--line-index:32"></li>
		<li style="--line-index:33"></li>
		<li style="--line-index:34"></li>
		<li style="--line-index:35"></li>
		<li style="--line-index:36"></li>
		<li style="--line-index:37"></li>
		<li style="--line-index:38"></li>
		<li style="--line-index:39"></li>
		<li style="--line-index:40"></li>
		<li style="--line-index:41"></li>
		<li style="--line-index:42"></li>
		<li style="--line-index:43"></li>
		<li style="--line-index:44"></li>
		<li style="--line-index:45"></li>
		<li style="--line-index:46"></li>
		<li style="--line-index:47"></li>
		<li style="--line-index:48"></li>
		<li style="--line-index:49"></li>
		<li style="--line-index:50"></li>
		<li style="--line-index:51"></li>
		<li style="--line-index:52"></li>
		<li style="--line-index:53"></li>
		<li style="--line-index:54"></li>
		<li style="--line-index:55"></li>
		<li style="--line-index:56"></li>
		<li style="--line-index:57"></li>
		<li style="--line-index:58"></li>
		<li style="--line-index:59"></li>
		<li style="--line-index:60"></li>
		<li style="--line-index:61"></li>
		<li style="--line-index:62"></li>
		<li style="--line-index:63"></li>
		<li style="--line-index:64"></li>
		<li style="--line-index:65"></li>
		<li style="--line-index:66"></li>
		<li style="--line-index:67"></li>
		<li style="--line-index:68"></li>
		<li style="--line-index:69"></li>
		<li style="--line-index:70"></li>
		<li style="--line-index:71"></li>
		<li style="--line-index:72"></li>
		<li style="--line-index:73"></li>
		<li style="--line-index:74"></li>
		<li style="--line-index:75"></li>
		<li style="--line-index:76"></li>
		<li style="--line-index:77"></li>
		<li style="--line-index:78"></li>
		<li style="--line-index:79"></li>
		<li style="--line-index:80"></li>
		<li style="--line-index:81"></li>
		<li style="--line-index:82"></li>
		<li style="--line-index:83"></li>
		<li style="--line-index:84"></li>
		<li style="--line-index:85"></li>
		<li style="--line-index:86"></li>
		<li style="--line-index:87"></li>
		<li style="--line-index:88"></li>
		<li style="--line-index:89"></li>
		<li style="--line-index:90"></li>
		<li style="--line-index:91"></li>
		<li style="--line-index:92"></li>
		<li style="--line-index:93"></li>
		<li style="--line-index:94"></li>
		<li style="--line-index:95"></li>
		<li style="--line-index:96"></li>
		<li style="--line-index:97"></li>
		<li style="--line-index:98"></li>
		<li style="--line-index:99"></li>
		<li style="--line-index:100"></li>
		<li style="--line-index:101"></li>
		<li style="--line-index:102"></li>
		<li style="--line-index:103"></li>
		<li style="--line-index:104"></li>
		<li style="--line-index:105"></li>
		<li style="--line-index:106"></li>
		<li style="--line-index:107"></li>
		<li style="--line-index:108"></li>
		<li style="--line-index:109"></li>
		<li style="--line-index:110"></li>
		<li style="--line-index:111"></li>
		<li style="--line-index:112"></li>
		<li style="--line-index:113"></li>
		<li style="--line-index:114"></li>
		<li style="--line-index:115"></li>
		<li style="--line-index:116"></li>
		<li style="--line-index:117"></li>
		<li style="--line-index:118"></li>
		<li style="--line-index:119"></li>
		<li style="--line-index:120"></li>
		<li style="--line-index:121"></li>
		<li style="--line-index:122"></li>
		<li style="--line-index:123"></li>
		<li style="--line-index:124"></li>
		<li style="--line-index:125"></li>
		<li style="--line-index:126"></li>
		<li style="--line-index:127"></li>
		<li style="--line-index:128"></li>
		<li style="--line-index:129"></li>
		<li style="--line-index:130"></li>
		<li style="--line-index:131"></li>
		<li style="--line-index:132"></li>
		<li style="--line-index:133"></li>
		<li style="--line-index:134"></li>
		<li style="--line-index:135"></li>
		<li style="--line-index:136"></li>
		<li style="--line-index:137"></li>
		<li style="--line-index:138"></li>
		<li style="--line-index:139"></li>
		<li style="--line-index:140"></li>
		<li style="--line-index:141"></li>
		<li style="--line-index:142"></li>
		<li style="--line-index:143"></li>
		<li style="--line-index:144"></li>
		<li style="--line-index:145"></li>
		<li style="--line-index:146"></li>
		<li style="--line-index:147"></li>
		<li style="--line-index:148"></li>
		<li style="--line-index:149"></li>
		<li style="--line-index:150"></li>
		<li style="--line-index:151"></li>
		<li style="--line-index:152"></li>
		<li style="--line-index:153"></li>
		<li style="--line-index:154"></li>
		<li style="--line-index:155"></li>
		<li style="--line-index:156"></li>
		<li style="--line-index:157"></li>
		<li style="--line-index:158"></li>
		<li style="--line-index:159"></li>
		<li style="--line-index:160"></li>
		<li style="--line-index:161"></li>
		<li style="--line-index:162"></li>
		<li style="--line-index:163"></li>
		<li style="--line-index:164"></li>
		<li style="--line-index:165"></li>
		<li style="--line-index:166"></li>
		<li style="--line-index:167"></li>
		<li style="--line-index:168"></li>
		<li style="--line-index:169"></li>
		<li style="--line-index:170"></li>
		<li style="--line-index:171"></li>
		<li style="--line-index:172"></li>
		<li style="--line-index:173"></li>
		<li style="--line-index:174"></li>
		<li style="--line-index:175"></li>
		<li style="--line-index:176"></li>
		<li style="--line-index:177"></li>
		<li style="--line-index:178"></li>
		<li style="--line-index:179"></li>
		<li style="--line-index:180"></li>
		<li style="--line-index:181"></li>
		<li style="--line-index:182"></li>
		<li style="--line-index:183"></li>
		<li style="--line-index:184"></li>
		<li style="--line-index:185"></li>
		<li style="--line-index:186"></li>
		<li style="--line-index:187"></li>
		<li style="--line-index:188"></li>
		<li style="--line-index:189"></li>
		<li style="--line-index:190"></li>
		<li style="--line-index:191"></li>
		<li style="--line-index:192"></li>
		<li style="--line-index:193"></li>
		<li style="--line-index:194"></li>
		<li style="--line-index:195"></li>
		<li style="--line-index:196"></li>
		<li style="--line-index:197"></li>
		<li style="--line-index:198"></li>
		<li style="--line-index:199"></li>
		<li style="--line-index:200"></li>
		<li style="--line-index:201"></li>
		<li style="--line-index:202"></li>
		<li style="--line-index:203"></li>
		<li style="--line-index:204"></li>
		<li style="--line-index:205"></li>
		<li style="--line-index:206"></li>
		<li style="--line-index:207"></li>
		<li style="--line-index:208"></li>
		<li style="--line-index:209"></li>
		<li style="--line-index:210"></li>
		<li style="--line-index:211"></li>
		<li style="--line-index:212"></li>
		<li style="--line-index:213"></li>
		<li style="--line-index:214"></li>
		<li style="--line-index:215"></li>
		<li style="--line-index:216"></li>
		<li style="--line-index:217"></li>
		<li style="--line-index:218"></li>
		<li style="--line-index:219"></li>
		<li style="--line-index:220"></li>
		<li style="--line-index:221"></li>
		<li style="--line-index:222"></li>
		<li style="--line-index:223"></li>
		<li style="--line-index:224"></li>
		<li style="--line-index:225"></li>
		<li style="--line-index:226"></li>
		<li style="--line-index:227"></li>
		<li style="--line-index:228"></li>
		<li style="--line-index:229"></li>
		<li style="--line-index:230"></li>
		<li style="--line-index:231"></li>
		<li style="--line-index:232"></li>
		<li style="--line-index:233"></li>
		<li style="--line-index:234"></li>
		<li style="--line-index:235"></li>
		<li style="--line-index:236"></li>
		<li style="--line-index:237"></li>
		<li style="--line-index:238"></li>
		<li style="--line-index:239"></li>
		<li style="--line-index:240"></li>
		<li style="--line-index:241"></li>
		<li style="--line-index:242"></li>
		<li style="--line-index:243"></li>
		<li style="--line-index:244"></li>
		<li style="--line-index:245"></li>
		<li style="--line-index:246"></li>
		<li style="--line-index:247"></li>
		<li style="--line-index:248"></li>
		<li style="--line-index:249"></li>
		<li style="--line-index:250"></li>
		<li style="--line-index:251"></li>
		<li style="--line-index:252"></li>
		<li style="--line-index:253"></li>
		<li style="--line-index:254"></li>
		<li style="--line-index:255"></li>
		<li style="--line-index:256"></li>
		<li style="--line-index:257"></li>
		<li style="--line-index:258"></li>
		<li style="--line-index:259"></li>
		<li style="--line-index:260"></li>
		<li style="--line-index:261"></li>
		<li style="--line-index:262"></li>
		<li style="--line-index:263"></li>
		<li style="--line-index:264"></li>
		<li style="--line-index:265"></li>
		<li style="--line-index:266"></li>
		<li style="--line-index:267"></li>
		<li style="--line-index:268"></li>
		<li style="--line-index:269"></li>
		<li style="--line-index:270"></li>
		<li style="--line-index:271"></li>
		<li style="--line-index:272"></li>
		<li style="--line-index:273"></li>
		<li style="--line-index:274"></li>
		<li style="--line-index:275"></li>
		<li style="--line-index:276"></li>
		<li style="--line-index:277"></li>
		<li style="--line-index:278"></li>
		<li style="--line-index:279"></li>
		<li style="--line-index:280"></li>
		<li style="--line-index:281"></li>
		<li style="--line-index:282"></li>
		<li style="--line-index:283"></li>
		<li style="--line-index:284"></li>
		<li style="--line-index:285"></li>
		<li style="--line-index:286"></li>
		<li style="--line-index:287"></li>
		<li style="--line-index:288"></li>
		<li style="--line-index:289"></li>
		<li style="--line-index:290"></li>
		<li style="--line-index:291"></li>
		<li style="--line-index:292"></li>
		<li style="--line-index:293"></li>
		<li style="--line-index:294"></li>
		<li style="--line-index:295"></li>
		<li style="--line-index:296"></li>
		<li style="--line-index:297"></li>
		<li style="--line-index:298"></li>
		<li style="--line-index:299"></li>
		<li style="--line-index:300"></li>
		<li style="--line-index:301"></li>
		<li style="--line-index:302"></li>
		<li style="--line-index:303"></li>
		<li style="--line-index:304"></li>
		<li style="--line-index:305"></li>
		<li style="--line-index:306"></li>
		<li style="--line-index:307"></li>
		<li style="--line-index:308"></li>
		<li style="--line-index:309"></li>
		<li style="--line-index:310"></li>
		<li style="--line-index:311"></li>
		<li style="--line-index:312"></li>
		<li style="--line-index:313"></li>
		<li style="--line-index:314"></li>
		<li style="--line-index:315"></li>
		<li style="--line-index:316"></li>
		<li style="--line-index:317"></li>
		<li style="--line-index:318"></li>
		<li style="--line-index:319"></li>
		<li style="--line-index:320"></li>
		<li style="--line-index:321"></li>
		<li style="--line-index:322"></li>
		<li style="--line-index:323"></li>
		<li style="--line-index:324"></li>
		<li style="--line-index:325"></li>
		<li style="--line-index:326"></li>
		<li style="--line-index:327"></li>
		<li style="--line-index:328"></li>
		<li style="--line-index:329"></li>
		<li style="--line-index:330"></li>
		<li style="--line-index:331"></li>
		<li style="--line-index:332"></li>
		<li style="--line-index:333"></li>
		<li style="--line-index:334"></li>
		<li style="--line-index:335"></li>
		<li style="--line-index:336"></li>
		<li style="--line-index:337"></li>
		<li style="--line-index:338"></li>
		<li style="--line-index:339"></li>
		<li style="--line-index:340"></li>
		<li style="--line-index:341"></li>
		<li style="--line-index:342"></li>
		<li style="--line-index:343"></li>
		<li style="--line-index:344"></li>
		<li style="--line-index:345"></li>
		<li style="--line-index:346"></li>
		<li style="--line-index:347"></li>
		<li style="--line-index:348"></li>
		<li style="--line-index:349"></li>
		<li style="--line-index:350"></li>
		<li style="--line-index:351"></li>
		<li style="--line-index:352"></li>
		<li style="--line-index:353"></li>
		<li style="--line-index:354"></li>
		<li style="--line-index:355"></li>
		<li style="--line-index:356"></li>
		<li style="--line-index:357"></li>
		<li style="--line-index:358"></li>
		<li style="--line-index:359"></li>
		<li style="--line-index:360"></li>
	    <!-- 360个<li>，可用模板语法生成  -->
	</ul>
	
</body>
</html>
